<template>
	<div class="Echarts">
		<div ref="myChart" id="myChart"  class="inMain" style="width: 210px;height: 218px;"></div>
	</div>
</template>

<script>
	export default {
		name: 'internationEc4rt',
		data() {
			return{
				qData:[]
			}
		},
		props:{
		    qgData:{
				type:Array,
				required:true
		    }
		},
		watch:{
		   qgData(val){
			   // console.log('aa',val)
			   this.qData=val
				this.$nextTick(()=>{
					this.myEcharts()
				})
		   }
		},
		methods: {
			
			myEcharts() {
				let itemData=this.qData.map(item=>{
					return item.sum
				})
				let myChart = this.$echarts.getInstanceByDom(this.$refs.myChart) ;
				//配置图表
				if (myChart==null) {
				    myChart = this.$echarts.init(this.$refs.myChart);  //利用原型调取Echarts的初始化方法
				}
				const option = {
					title:{
						text:''
					},
					tooltip: {
						trigger: 'axis',
						show: false,
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						},
					},
					legend: {
						show: true,
						itemWidth: 14,
						itemHeight: 14,
						textStyle: {
						      color: "#DFF8FF",
							  fontSize:15
						},
					},
					grid: {
						left: '3%',
						top: '10%',
						width: "70%",
						height:"90%",
						containLabel: true
					},
					xAxis: [{
						splitLine: {
							show: false
						},
						type: 'value',
						show: false,
					}],
					yAxis: [{
						splitLine: {
							show: false
						},
						axisLine: { //y轴
							show: false
						},
						type: 'category',
						axisTick: {
							show: false
						},
						inverse: true,
						axisLabel: {
						     show: false
						   }
					}],
					series: [{
						name: '全国',
						type: 'bar',
						barWidth: 12, // 柱子宽度
						label: {
							show: true,
							position: 'right', // 位置
							color: '#FFFFFF ',
							fontSize: 15,
							distance: 10, // 距离
							formatter: '{c}' // 这里是数据展示的时候显示的数据
						}, // 柱子上方的数值
						itemStyle: {
							color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
							                    offset: 0,
							                    color: '#0088FF'
							                }, {
							                    offset: 1,
							                    color: '#26EFE1' 
							                }], false), // 渐变
						},
						// data: [90, 100, 110]
						data: itemData
					}, ]
				};
				myChart.setOption(option);  //将编写好的配置项挂载到Echarts上
				window.addEventListener("resize", function() {
				    myChart.resize();  //页面大小变化后Echarts也更改大小
				});
			}
		},
		mounted() {
			this.myEcharts();
		}
	}
</script>


<style>

</style>
